<template>
  <div class="app-container home">
      <div class="adduserbox">
          <div class="box">
            <img class="boximg" src="@/assets/images/ind_1.png" alt="">
            <div class="boxfr">
              <span class="tex1 col1">{{statisticInfo.totalClient}}</span>
              <span class="tex2">总用户数</span>
            </div>
          </div>
          <div class="box">
            <img class="boximg" src="@/assets/images/ind_2.png" alt="">
            <div class="boxfr">
              <span class="tex1 col2">{{statisticInfo.thisMonthClient}}</span>
              <span class="tex2">本月新增</span>
            </div>
          </div>
          <div class="box">
            <img class="boximg" src="@/assets/images/ind_3.png" alt="">
            <div class="boxfr">
              <span class="tex1 col3">{{statisticInfo.dayClient}}</span>
              <span class="tex2">今日新增</span>
            </div>
          </div>
      </div>
      <div class="addintegral">
          <div class="box">
            <div class="boxfl">
              <span class="tex2">总积分数</span>
              <span class="tex1 col1">{{statisticInfo.totalIntegral?statisticInfo.totalIntegral:0}}</span>
            </div>
            <img class="boximg" src="@/assets/images/ind_4.png" alt="">
          </div>
          <div class="box">
            <div class="boxfl">
              <span class="tex2">本月新增</span>
              <span class="tex1 col2">{{statisticInfo.thisMonthIntegral?statisticInfo.thisMonthIntegral:0}}</span>
            </div>
            <img class="boximg" src="@/assets/images/ind_5.png" alt="">

          </div>
          <div class="box">
            <div class="boxfl">
              <span class="tex2">今日新增</span>
              <span class="tex1 col3">{{statisticInfo.dayIntegral?statisticInfo.dayIntegral:0}}</span>
            </div>
            <img class="boximg" src="@/assets/images/ind_6.png" alt="">
          </div>
      </div>
      <div class="userStatistics">
        <div class="boxfl">
          <div class="tit">用户轨迹</div>
          <!-- <div id="china" ></div> -->
          <china style="height: 800px;width: 1000px"
                  @map-change="mapClick"
                  @back-change="backClick"
                  :chinaJson="chinaData"
                  v-if="chinaData.length"
          />
        </div>
        <div class="boxfr">
          <div class="timeselect">
            <div class="fastbox">
              <div class="lump" :class="fastval1==1?'on':''" @click="fastbtn1(1)">昨日</div>
              <div class="lump" :class="fastval1==0?'on':''" @click="fastbtn1(0)">今日</div>
              <div class="lump" :class="fastval1==2?'on':''" @click="fastbtn1(2)">最近7日</div>
            </div>
            <el-date-picker
              v-model="stateTime1"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
              @change="timeChange1"
              >
            </el-date-picker>
          </div>
          <div class="statDetail">
          	<div class="titrow">
          		<span class="lump1">排名</span>
          		<span class="lump2">地区</span>
          		<span class="lump3">人数</span>
          		<span class="lump4">占比</span>
          	</div>
          	<div class="listbox">
          		<div class="row" v-for="(item,index) in 15" :key="index">
          			<div class="lump1"><span :class="index==0?'colff0':index==1?'colff9':index==2?'col00b':''">{{index+1}}</span></div>
          			<div class="lump2">广州</div>
          			<div class="lump3">10</div>
          			<div class="lump4">90%</div>
          		</div>
          	</div>
            <div class="hint">-只显示前15名-</div>
          </div>
        </div>
      </div>
      <div class="structurebox">
          <div class="boxtop">
            <div class="tittex">回收订单</div>
            <div class="timeselect">
              <div class="fastbox">
                <div class="lump" :class="fastval1==1?'on':''" @click="fastbtn1(1)">昨日</div>
                <div class="lump" :class="fastval1==0?'on':''" @click="fastbtn1(0)">今日</div>
                <div class="lump" :class="fastval1==2?'on':''" @click="fastbtn1(2)">最近7日</div>
              </div>
              <el-date-picker
                v-model="stateTime2"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
                @change="timeChange2"
                >
              </el-date-picker>
            </div>
          </div>
          <div id="graph1" ></div>
      </div>
      <div class="structurebox">
          <div class="boxtop">
            <div class="tittex">积分订单</div>
            <div class="timeselect">
              <div class="fastbox">
                <div class="lump" :class="fastval1==1?'on':''" @click="fastbtn1(1)">昨日</div>
                <div class="lump" :class="fastval1==0?'on':''" @click="fastbtn1(0)">今日</div>
                <div class="lump" :class="fastval1==2?'on':''" @click="fastbtn1(2)">最近7日</div>
              </div>
              <el-date-picker
                v-model="stateTime3"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
                @change="timeChange3"
                >
              </el-date-picker>
            </div>
          </div>
          <div id="graph2" ></div>
      </div>
  </div>
</template>

<script>
  import { homePageStatisticalData,
            homePageStatisticalClientData,
            mapTrajectoryStatistics,
            homePageStatisticalIntegralOrderData,
            homePageStatisticalRecycleOrderData } from "@/api/index/index";
  // import china from '@/utils/china.js'
  import china from "./china"
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.5.0",
      info:{},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      fastval1:1,
      stateTime1:'',
      statisticInfo:{},
      fastval2:1,
      stateTime2:'',
      fastval3:1,
      stateTime3:'',
      areaData: {
          areaCode: "000000",
          areaLevel: "county",
          name: "中国",
          areaName: "中国",
      },
      chinaData:[]
    };
  },
  components:{
    china
  },
  created() {
    this.getHomePageStatisticalData()
    this.getHomePageStatisticalClientData()
  },
  mounted(){
  	   setTimeout(()=>{
  		   // this.drawLine()
  		   this.graph1()
  		   this.graph2()
  	   },200)
  },
  methods: {
    mapClick(data) {
        this.areaData = data;
    },
    backClick(data) {
        this.areaData = data;
    },
    //用户轨迹时间筛选
    fastbtn1(index){
      this.fastval1=index
       this.stateTime1=''
        this.getHomePageStatisticalClientData()
    },
    //时间轨迹选择时间
    timeChange1(time){
      this.stateTime1=new Date(time).toLocaleDateString()
      this.fastval1=3
      this.getHomePageStatisticalClientData()
    },
    timeChange2(time){
      this.stateTime2=new Date(time).toLocaleDateString()
      this.fastval2=3
      // this.getHomePageStatisticalClientData()
    },
    timeChange3(time){
      this.stateTime3=new Date(time).toLocaleDateString()
      this.fastval3=3
      // this.getHomePageStatisticalClientData()
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    //获取用户统计与积分统计
    getHomePageStatisticalData(){
      homePageStatisticalData().then(response => {
        this.statisticInfo=response.data
         // console.log(this.statisticInfo)
      });
    },
    getHomePageStatisticalClientData(){
      let data={
        type:this.fastval1,
        stateTime:this.stateTime1
      }
      mapTrajectoryStatistics(data).then(response => {
        this.chinaData=JSON.parse(response.msg)
        console.log(this.chinaData)
      });
    },
    drawLine(){
    		  // let data = await APIHOME.getDetail()
    		  	// this.info=data
         this.info.areaAVGList=[
            {name: "南海诸岛", value: 0},
            {name: "北京", value: 0},
            {name: "天津", value: 0},
            {name: "上海", value: 0},
            {name: "重庆", value: 0},
            {name: "河北", value: 0},
            {name: "河南", value: 0},
            {name: "云南", value: 0},
            {name: "辽宁", value: 0},
            {name: "黑龙江", value: 0},
            {name: "湖南", value: 0},
            {name: "安徽", value: 0},
            {name: "山东", value: 0},
            {name: "新疆", value: 0},
            {name: "江苏", value: 0},
            {name: "浙江", value: 0},
            {name: "江西", value: 0},
            {name: "湖北", value: 0},
            {name: "广西", value: 0},
            {name: "甘肃", value: 0},
            {name: "山西", value: 0},
            {name: "内蒙古", value: 0},
            {name: "陕西", value: 0},
            {name: "吉林", value: 0},
            {name: "福建", value: 0},
            {name: "贵州", value: 0},
            {name: "广东", value: 0},
            {name: "青海", value: 0},
            {name: "西藏", value: 0},
            {name: "四川", value: 0},
            {name: "宁夏", value: 0},
            {name: "海南", value: 0},
            {name: "台湾", value: 0},
            {name: "香港", value: 0},
            {name: "澳门", value: 0},
          ]
    		 var myChart = this.$echarts.init(document.getElementById('china'));
    		let option = {
    			 tooltip: {
    					 formatter:function(params,ticket, callback){
    						 return params.seriesName+'<br />'+params.name+'：'+params.value
    					 }//数据格式化
    				 },
    			 visualMap: {
    				 min: 0,
    				 max: 21.0,
    				 left: 'left',
    				 top: 'bottom',
    				 text: ['高','低'],//取值范围的文字
    				 inRange: {
    					 color: ['#e6e6e6', '#ebfcf1','#38e072']//取值范围的颜色
    				 },
    				 show:true//图注
    			 },
    			 geo: {
    				 map: 'china',
    				 roam: false,//不开启缩放和平移
    				 zoom:1.23,//视角缩放比例
    				 label: {
    					 normal: {
    						 show: true,
    						 fontSize:'10',
    						 color: 'rgba(0,0,0,0.7)'
    					 }
    				 },
    				 itemStyle: {
    					 normal:{
    						 borderColor: 'rgba(0, 0, 0, 0.2)'
    					 },
    					 emphasis:{
    						 areaColor: '#F3B329',//鼠标选择区域颜色
    						 shadowOffsetX: 0,
    						 shadowOffsetY: 0,
    						 shadowBlur: 20,
    						 borderWidth: 0,
    						 shadowColor: 'rgba(0, 0, 0, 0.5)'
    					 }
    				 }
    			 },
    			 series : [
    				 {
    					 name: '用户量',
    					 type: 'map',
    					 geoIndex: 0,
    					 data:this.info.areaAVGList
    				 }
    			 ]
    		 };
    		 myChart.setOption(option);
    		 myChart.on('click', function (params) {
    			 alert(params.name);
    		 });
    },
    graph1(){
     let data={
       type:this.fastval2,
       stateTime:this.stateTime2
     }
      // homePageStatisticalRecycleOrderData(data).then(response=>{
      //   console.log(response)
      // })
      let myChart = this.$echarts.init(document.getElementById('graph1'));
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
            data: ['总订单数','新增订单数'],
            left: 'right',
            top: 20
          },
          grid: {
            left: '2%',
            right: '0%',
            bottom: '7%',
            containLabel: false
          },
        xAxis: {
          type: 'category',
          data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00','14:00','16:00','18:00','20:00','22:00']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '总订单数',
            type: 'line',
            data: [150, 230, 224, 218, 135, 147, 260,150, 230, 224, 200,180],
          },
          {
            name: '新增订单数',
            type: 'line',
            data: [120, 250, 220, 180, 130, 170, 286,150, 213, 240, 220,218],
          }
        ]
      };
      option && myChart.setOption(option);
    },
    graph2(){
      let data={
        type:this.fastval3,
        stateTime:this.stateTime3
      }
      homePageStatisticalIntegralOrderData(data).then(response=>{
        // console.log(response)
      })
      let myChart = this.$echarts.init(document.getElementById('graph2'));
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
            data: ['总订单数','新增订单数'],
            left: 'right',
            top: 20
          },
          grid: {
            left: '2%',
            right: '0%',
            bottom: '7%',
            containLabel: false
          },
        xAxis: {
          type: 'category',
          data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00','14:00','16:00','18:00','20:00','22:00']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '总订单数',
            type: 'line',
            data: [150, 230, 224, 218, 135, 147, 260,150, 230, 224, 200,180],
          },
          {
            name: '新增订单数',
            type: 'line',
            data: [120, 250, 220, 180, 130, 170, 286,150, 213, 240, 220,218],
          }
        ]
      };
      option && myChart.setOption(option);
    }
  },
};
</script>

<style scoped lang="scss">
  @import '../assets/logo/index.scss';
  .col1{
    color: #007aff;
  }
  .col2{
    color: #ff3a30;
  }
  .col3{
    color: #ff9502;
  }
  .colff0{
  	color: #ff3a30 !important;
  }
  .colff9{
  	color: #ff9502 !important;
  }
  .col00b{
  	color: #00bb7a !important;
  }
  .colfont1{
  	color: #00e36a !important;
  }
  .colfont2{
  	color: #ff5a4e !important;
  }
  .timeselect{
    height: 79px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .fastbox{
      display: flex;
      border-radius: 4px;
      border: 1px solid #DCDFE6;
      overflow: hidden;
      margin-right: 10px;
      .lump{
        padding: 0 10px;
        border-right: 1px solid #DCDFE6;
        color: #999;
        line-height: 34px;
        font-size: 14px;
        cursor: pointer;
        &.on{
          color: #fff;
          background: #00bb7a;
        }
        &:last-child{
          border: none;
        }
      }
    }
  }
    .adduserbox{
      border: 1px solid #e5e5e5;
      padding: 40px 0;
      margin: 0 100px;
      border-radius: 5px;
      display: flex;
      justify-content: space-around;
      .box{
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        border-right: 1px solid #e5e5e5;
        margin-right: 40px;
        padding-right: 60px;
        &:last-child{
          border: none;
        }
        .boximg{
          width: 44px;
          height: 44px;
          vertical-align: middle;
        }
        .boxfr{
          display: flex;
          flex-direction: column;
          margin-left: 40px;
          font-weight: bold;
          .tex1{
           font-size: 20px;
          }
          .tex2{
            font-size: 16px;
            color: #bfbfbf;
            margin-top: 5px;
          }
        }
      }
    }
    .addintegral{
      border: 1px solid #e5e5e5;
      border-radius: 5px;
      padding: 20px;
      margin: 30px 100px 0;
      display: flex;
      justify-content: space-around;
      .box{
        display: flex;
        align-items: center;
        justify-content: space-around;
        background:#f2f2f7 ;
        flex: 1;
        padding: 20px 0;
        border-radius: 8px;
        margin: 0 40px;
        &:last-child{
          border: none;
        }
        .boxfl{
          display: flex;
          flex-direction: column;
          font-weight: bold;
          .tex1{
           font-size: 20px;
           margin-top: 10px;
          }
          .tex2{
            font-size: 16px;
            color: #bfbfbf;
          }
        }
        .boximg{
          width: 44px;
          height: 44px;
          vertical-align: middle;
        }

      }
    }
    .userStatistics{
      display: flex;
      margin: 0 100px;
      .boxfl{
       flex:1;
        .tit{
          font-weight: bold;
          font-size: 18px;
          border-bottom: 1px solid #e5e5e5;
          height: 80px;
          display: flex;
          align-items: center;
        }
        #china{
        	width: 100%;
        	height: 600px;
          margin-top: 20px;
        }
      }
      .boxfr{
        width: 500px;
        .statDetail{
          padding-top: 10px;
          border-top: 1px solid #e5e5e5;
          .titrow{
          	display: flex;
          	align-items: center;
          	font-size: 14px;
          	font-weight: bold;
          	text-align: center;
          	color: #333;
            background: #efefef;
          	width: 500px;
          	margin: 20px auto 0;
          	line-height: 34px;
          }
          .listbox{
          	width: 500px;
          	margin: 0 auto;
          	.row{
          		display: flex;
          		text-align: center;
          		line-height: 34px;
          		margin-top: 2px;
              font-size: 14px;
              &:nth-child(2n){
                background: #efefef;
              }
          		.lump1{
          			display: flex;
          			justify-content: center;
          			align-items: center;
          			span{
          				width: 15px;
          				height: 15px;
          				border-radius: 50%;
          				display: flex;
          				justify-content: center;
          				align-items: center;
          				font-size: 12px;
          				color: #333;
          			}
          		}
          		.lump4{
          			font-size: 14px;
          			span{
          				background: #52c1f5;
          				width: 100%;
          				height: 14px;
          				line-height: 14px;
          				color: #fff;
          				text-indent: 2em;
          				border-radius: 8px;
          				font-size: 12px;
          				margin-right: 5px;
          			}
          		}
          	}
          }
          .hint{
            color: #bebebe;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            margin-top: 15px;
          }
          .lump1{
          	width: 50px;
          }
          .lump2{
          	width: 180px;
          }
          .lump3{
          	width: 140px;
          }
          .lump4{
          	width: 140px;
          }
        }
      }
    }
    .structurebox{
      border: 1px solid #e5e5e5;
      margin: 40px 100px 0;
      padding: 10px 30px;
      .tittex{
        font-size: 14px;
        color: #000;
        font-weight: bold;
      }
      .boxtop{
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #e5e5e5;
      }
      #graph1,#graph2{
      	width: 100%;
      	height: 400px;
      }
    }
</style>
